<template> 
    <div class="acupoint-detail">
        <div class="title">[&nbsp;{{titleName}}&nbsp;]</div>
        <div class="list-item">
            <ul class=" clear-both">
                <li class="class-item float-left text-center" v-for="(item,index) in detailList" :key="index" @click="detailItem(item)">
                    <p >{{item.title}}</p>
                    <p class="pinying">{{item.title_cn}}</p>
                </li>
            </ul>
        </div>
    </div> 
</template>

<script>
import * as api  from '@/utils/api' 
export default {
    onLoad(opt){ 
        wx.setNavigationBarTitle({ title: opt.title });
        this.getDateDetail(opt.typeId); 
        this.titleName=opt.title;
    },
    data () {
        return {
            titleName:'',
            detailList:[],
        }
    },
    methods:{
        //跳转详情
        detailItem(item){
            let url = `./../acupoint-item-detail/main?typeId=${item.d_id}&title=${item.title}`;
            wx.navigateTo({url}) 
        },
        getDateDetail(id){
            let vm = this;
            let body={
                model: "Points",
                offset:0,
                limit:50,
                orderBy:"create_time",
                condition: {
                    id:id
                },
                with:{ 
                    "0":"pointSons", 
                },
            }
            api.commonSite(body).then(res=>{
                if(res.data.code==200){ 
                    if(res.data.data.data[0].pointSons){
                        vm.detailList=res.data.data.data[0].pointSons;
                        vm.detailList.forEach((item,index)=>{
                            item.d_id=res.data.data.data[0].id
                        })
                       
                    } 
                }; 
            })
        },
    }, 
}

</script>
<style lang="scss" scoped>
.acupoint-detail{
    width:100%;
    height:100%;
    padding:30rpx;
    box-sizing:border-box;
    background:#fff;
    .title{
        padding:10rpx;
        color:#666;
        font-size:28rpx; 
    }
    .list-item{
        width:100%;
        margin-top:20rpx;
        .class-item{
            width:31%; 
            color:#333;
            padding:20rpx 0;
            margin-bottom:20rpx;
            margin-left:10rpx;
            box-sizing:border-box;
            font-size:28rpx;
            background:#F8EFF0;
            .pinying{
                font-size:26rpx;
            }
            p{
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap
            }
        }
    }
}
</style>
